<template>
  <div class="home"
       homebg.jpg>
    <div class="content">
      <div class="welcome">{{$t('message.Home_welcome')}}<span><br />{{shopInfo.shopname}}</span></div>
      <div class="shop-logo">
        <img :src="shopInfo.shoplogo">
      </div>
      <div class="shop-time">
        <div class="title">{{$t('message.Home_businesshours')}}</div>
        <div class="desc">{{shopInfo.starttime}}</div>
      </div>
      <div class="shop-info">

        <div class="address">
          <div class="title">{{$t('message.Home_address')}}:</div>
          <div>{{shopInfo.address}}</div>
        </div>
        <div class="phone">
          <div class="title">{{$t('message.Home_thephone')}}:</div>
          <div>{{shopInfo.phone}}</div>
        </div>

        <div class="discount"
             v-if="discount">
          <span>-{{discount*100}}%</span>
        </div>

      </div>
      <div class="national_language">
        <div class="national_img">
          <ul class="national_img_way">
            <li v-for="(item,index) in outward"
                :key="index"
                @click="cut_language(item.lang,index)"
                :class="[ boder_class==index?'boder_class':'']"><img :src="item.img"
                   alt=""></li>
          </ul>
        </div>
      </div>
      <div class="btn"
           @click="goMenu">{{$t('message.Home_goto')}}</div>
    </div>
  </div>
</template>

<script>
import bus from '../../store/bus.js'

import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'Home',
  data () {
    return {
      country: [],
      jackfalg: [{
        name: 'Germany',
        img: require('../../../static/spicture/germany.jpg'),
        lang: 'local'
      },
      {
        name: 'Germany',
        img: require('../../../static/spicture/germany.jpg'),
        lang: 'de'
      },
      {
        name: 'China',
        img: require('../../../static/spicture/china.jpg'),
        lang: 'zh-CN'
      },
      {
        name: 'America',
        img: require('../../../static/spicture/america.jpg'),
        lang: 'en'
      },
      {
        name: 'Denmark',
        img: require('../../../static/spicture/Denmark.jpg'),
        lang: 'da'
      }, {
        name: 'French',
        img: require('../../../static/spicture/French.jpg'),
        lang: 'fr'
      }, {
        name: 'Netherlands',
        img: require('../../../static/spicture/Netherlands.jpg'),
        lang: 'af'
      }, {
        name: 'Portugal',
        img: require('../../../static/spicture/Portugal.jpg'),
        lang: 'pt'
      }, {
        name: 'Spain',
        img: require('../../../static/spicture/Spain.jpg'),
        lang: 'es'
      }, {
        name: 'Sweden',
        img: require('../../../static/spicture/Sweden.jpg'),
        lang: 'sv'
      }, {
        name: 'Italy',
        img: require('../../../static/spicture/Italy.jpg'),
        lang: 'it'
      }],
      outward: [],
      boder_class: 0
    }
  },

  props: {
    discount: {
      type: Number
    },
    shopInfo: {
      type: Object
    }
  },

  components: {},

  mounted () {

    let lan = localStorage.getItem("lan");
    if(lan){
      this.$i18n.locale = lan
    }




    bus.$on('Home_country', (res) => {
      this.country = res.split(",")
      this.processing()


      if (navigator.language.indexOf("zh") >= 0) {
        this.$i18n.locale = 'zh-CN'
      } else if (navigator.language.indexOf("de") >= 0) {
        this.$i18n.locale = 'de'
      } else if (navigator.language.indexOf("en") >= 0) {
        this.$i18n.locale = 'en'
      } else if (navigator.language.indexOf("it") >= 0) {
        this.$i18n.locale = 'it'
      } else if (navigator.language.indexOf("da") >= 0) {
        this.$i18n.locale = 'da'
      } else if (navigator.language.indexOf("fr") >= 0) {
        this.$i18n.locale = 'fr'
      } else if (navigator.language.indexOf("af") >= 0) {
        this.$i18n.locale = 'af'
      } else if (navigator.language.indexOf("pt") >= 0) {
        this.$i18n.locale = 'pt'
      } else if (navigator.language.indexOf("es") >= 0) {
        this.$i18n.locale = 'es'
      } else if (navigator.language.indexOf("sv") >= 0) {
        this.$i18n.locale = 'sv'
      } else {
        this.$i18n.locale = 'zh-CN' // 英语
      }

      let index = this.country.indexOf(this.$i18n.locale);

      if(index<0){
        index  = 0;
      }
      console.log(this.country,this.$i18n.locale,index);
      this.cut_language(this.country[index],index);


    })

  },


  watch: {},

  computed: {
    ...mapGetters([
      'takelanguager'
    ]),  },

  filters: {},

  methods: {
    ...mapMutations([
      'depositlanguager'
    ]),

    processing () {
      for (let i = 0; i < this.country.length; i++) {
        for (let j = 0; j < this.jackfalg.length; j++) {
          if (this.country[i] == this.jackfalg[j].lang) {
            this.outward.push(this.jackfalg[j])
          }
        }
      }
    },
    cut_language (lang, index) {
      this.boder_class = index
      this.$i18n.locale = lang
      localStorage.setItem("lan", lang);
      this.depositlanguager(index)
    },
    goMenu () {
      const code = this.$route.query.code || 0
      const t = new Date().getTime()
      this.$router.push({
        path: '/menu',
        query: {
          code,
          t
        }
      })
    }
  },
  beforeDestroy () {
    //组件销毁前需要解绑事件。否则会出现重复触发事件的问题
    bus.$off('Home_country');
  },

}
</script>

<style scoped lang="scss">
@import "../../../static/css/mixin";

.home {
  background: url(../../../static/imgs/homebg.jpg);
  background-size: 100% 100%;
  margin: 0 auto;
  text-align: center;
  overflow-y: scroll;
  .content {
    padding-bottom: 1rem;
    .shop-logo {
      margin: 0rem auto;
      margin-top: 0.5rem;
      @include wh(4.5rem, 4.5rem);

      img {
        @include wh(100%);
        border-radius: 2.25rem;
      }
    }

    .welcome {
      margin-top: 0rem;
      font-size: 0.4rem;
      font-weight: 600;
      color: white;
      span {
        font-size: 0.5rem;
        color: white;
      }
    }

    .detail {
      width: 5.66rem;
      margin: 0.4rem auto 0;
      color: #969696;
    }

    .contact-info {
      margin: 0.4rem auto 0;

      div {
        @include fsc(0.4rem, #ca1717);
        font-weight: 600;
      }
    }
    .shop-time {
      margin-top: 0.2rem;
      .title {
        font-weight: 600;
        font-size: 0.4rem;
      }
    }
    .shop-info {
      background: white;
      width: 100%;
      font-size: 0.36rem;
      padding: 0.5rem;
      text-align: left;
      line-height: 0.5rem;
      font-family: PingFangSC-Regular;
      font-weight: 500;
      .address {
        color: #969696;
        display: flex;
      }
      .phone {
        margin-top: 0.4rem;
        color: #ca1717;
        display: flex;
        font-weight: 600;
      }
      .title {
        flex: 0 0 0.9rem;
      }

      .discount {
        margin: 0.4rem auto 0;
        @include fsc(0.4rem, $fc);
        font-weight: 600;
        @include whl(1.62rem, 0.64rem);
        padding-left: 0.4rem;
        background: center 0 url("../../../static/imgs/discount.png") no-repeat;
        background-size: 100% 100%;
      }
    }

    .btn {
      margin: 0.46rem auto 0;
      @include whl(5.28rem, 1rem);
      @include fsc(0.32rem, $fc);
      background-color: $tc;
      border-radius: 1rem;
      -moz-box-shadow: 2px 2px 5px #333333;
      -webkit-box-shadow: 2px 2px 5px #333333;
      box-shadow: 2px 2px 5px #333333;
    }
  }
}
.national_language {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.national_language .national_img_way {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.national_language .national_img_way li {
  font-size: 0;
  margin: 4px;
}
.national_language .national_img_way img {
  width: 35px;
  height: 26px;
}
.boder_class {
  border: 1px solid black;
}
</style>
